<template>
  <div class="contact-select">
    <el-autocomplete
        v-model="contactText"
        :fetch-suggestions="querySearch"
        custom-item="autocomplete-contact"
        popper-class="autocomplete-contact"
        :placeholder="placeholder"
        @select="handleSelect"
        icon="edit"
        :on-icon-click="handleIconClick"
        style="width:100%;"
    ></el-autocomplete>
  </div>
</template>

<script>
  import Vue from 'vue';
  Vue.component('autocomplete-contact', {
    functional: true,
    render: function (h, ctx) {
      let item = ctx.props.item;
      return h('li', ctx.data, [
        h('div', {attrs: {class: 'name'}}, [
          h('span', [item.name]),
          h('span', [item.phone]),
        ]),
        h('div', {attrs: {class: 'addr'}}, [
          h('span', [item.provice]),
          h('span', [item.city]),
          h('span', [item.regoin]),
          h('span', [item.text]),
        ]),
      ]);
    },
    props: {
      item: {type: Object, required: true}
    }
  });
  export default {
    name: 'ContactSelect',
    props:{
      placeholder:{
        type:String,
        default:'请选择回寄地址'
      }
    },
    data()
    {
      return {
        contactText:'', //地址显示文本

      }
    },
    computed:{
      contacts() //联系人
      {
         return this.$store.getters.contactList;
      },
    },
    methods: {
      querySearch(queryString, cb)
      {
        cb(this.contacts);
      },
      handleSelect(item)
      {
        this.contactText = item.name + ' / ' + item.phone + ' / ' + item.provice + item.city + item.regoin + item.text;
        this.$emit('select-contact',item);
      },
      handleIconClick()
      {
        this.$router.push({name:'userAddress'});
      },
    }
  }
</script>

<style lang="less">

  .autocomplete-contact {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
        span
        {
          + span
          {
            padding-left: 1em;
          }
        }
      }
      .addr {
        font-size: 13px;
        color: #999;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
</style>